import Vue from 'vue';
import VueRouter, { RouteConfig } from 'vue-router';
import BaseLayout from '../layout/base-layout.vue';
Vue.use(VueRouter);

const routes: Array<RouteConfig> = [
  {
    path: '/',
    redirect: 'about',
    component: BaseLayout,
    children: [
      {
        path: '/about',
        name: 'about',
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
      },
      {
        path: '/home',
        name: 'home',
        component: () => import(/* webpackChunkName: "about" */ '../views/Home.vue')
      },
      {
        path: '/drag',
        name: 'drag',
        component: () => import(/* webpackChunkName: "about" */ '../views/Drag.vue')
      },
      {
        path: '/vue-drag',
        name: 'vue-drag',
        component: () => import(/* webpackChunkName: "about" */ '../views/VueDrag.vue')
      },
      {
        path: '/tree',
        name: 'tree',
        component: () => import(/* webpackChunkName: "about" */ '../views/Tree.vue')
      },
      {
        path: '/scroll',
        name: 'scroll',
        component: () => import(/* webpackChunkName: "about" */ '../views/scroll.vue')
      }
    ]
  }
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;
